<template>
  <!--<transition name="el-fade-in-linear">-->
  <div class="main-bg">
    <div class="first">
      <el-row >

      </el-row>
      <div style="height:5px;">&nbsp;</div>
      <!-- 用户搜索选项组建 -->
      <vsearchtag  @toSearchFilter="toSearchFilter" :chooseParams="pageinfo.params.findParams" />
      <div style="height:5px;">&nbsp;</div>
    </div>
    <el-table
      border
      :row-class-name="tableRowClassName"
      style="width:100%"
      :max-height="slide_h"
      @header-contextmenu="showMenu"
      :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
      :data="data.data"
      ref="table"
      size="small"
      highlight-current-row
      @row-click="rowClick"
    >
      <el-table-column  label="#"  width="50" center>
        <template slot-scope="scope">
          <el-radio  :label="scope.$index" v-model="radio">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column  width="60" prop="id" label="ID">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>

      <el-table-column >
        <template slot="header" slot-scope="header" >
          <vproper :findParams="pageinfo.params.findParams.userName"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column prop="checkInRewardBalance"  label="奖励积分" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span   v-if="scope.row.state==0">
            <el-tag type="danger"  size="mini">{{states[scope.row.state].alias}}</el-tag>
          </span>
          <span v-else-if="scope.row.state==1">
            <el-tag type="success"  size="mini">{{states[scope.row.state].alias}}</el-tag>
          </span>
          <span v-else="scope.row.state==2">
            <el-tag  type="warning"  size="mini">{{states[scope.row.state].alias}}</el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column >
        <template slot="header" slot-scope="header" >
          <vproper :bottom="'bottom-end'" :findParams="pageinfo.params.findParams.createTime"  @toSearchFilter="toSearchFilter"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.checkInDate}}
        </template>
      </el-table-column>
    </el-table>
    <div class="first">
      <v-page v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"/>
    </div>
    <v-dialog v-if="dialoginfo.show == 1"
              :dialoginfo="dialoginfo"
              @changedialogshow="changedialogshow"/>
  </div>
  <!--</transition>-->
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  import tsearchtag from "@/components/search/template_tag_search"
  import tproper from "@/components/search/template_proper_search"

  export default {
    inject:["reload"],
    components: {
      "v-page": pagination,
      "vproper": tproper,
      "vsearchtag":tsearchtag
    },
    data() {
      return {
        dialoginfo: {
          show:0,
          title:'',
          url:'',
          data:''
        },
        data: "",
        slide_h:document.body.offsetHeight - (224),
        loadingTxt: "",
        radio: "",
        currentData: "",
        pageinfo: this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.memberCheckIn),
        search: "",
        states:this.$store.getters.getPageInfo(this.$route.path,this.proAPI.tableConfig.memberCheckIn).params.findParams.state.conditions.options,
      }
    },
    methods: {
      init() {
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllCheckInReward,lock:1,text:this.loadingTxt});
        this.proAPI.getJson(this.proAPI.URLS.findAllCheckInReward,this.proUtil.generateParams(this.pageinfo.params)).then((res) => {
          this.data = res;
          this.pageinfo.pages = res.pages;
          this.pageinfo.total = res.total;
        })
      },
      rowClick(row, column, event) {
        console.log(row.index);
        console.log(row);
        console.log(column);
        console.log(event);
        if(row!=undefined){
          this.currentData = row;
          this.radio = row.index;
        }
      },
      confirmReward(id,type){
        if(type==1){
          this.$confirm('你确定发放账号【'+this.currentData.userName+'】的奖励吗?', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            callback: action => {
              // console.log(action);
              if(action=="confirm"){
                this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.confirmCheckInReward,lock:1,text:this.loadingTxt});
                this.proAPI.postJson(this.proAPI.URLS.confirmCheckInReward,{"id":id}).then((res)=>{
                  this.$message.success({
                    "message":res.message
                  })
                  this.reload();
                })
              }
            }
          });
        }else if(type==2){
          this.$confirm('你确定重新发放账号【'+this.currentData.userName+'】的奖励吗?', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            callback: action => {
              // console.log(action);
              if(action=="confirm"){
                this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.reConfirmCheckInReward,lock:1,text:this.loadingTxt});
                this.proAPI.postJson(this.proAPI.URLS.reConfirmCheckInReward,{"id":id}).then((res)=>{
                  this.$message.success({
                    "message":res.message
                  })
                  this.reload();
                })
              }
            }
          });
        }
      },
      tableRowClassName({row, rowIndex}){
        row.index = rowIndex;
      },
      changepaginfo() {
        this.$store.commit("savePageInfo",this.pageinfo);
        this.init();
      },
      changedialogshow() {
        this.dialoginfo.show = 0;
      },
      toSearchFilter(){
        //需要初始化一下选中状态
        this.currentData = "";
        this.radio = "";
        this.pageinfo.params.page=1;
        this.init();
      },
    },
    mounted() {
      setTimeout(()=>{
        this.init();
      },500)
    },
    updated() {
      // console.log(333);
    },
    afterCreated() {

    }
  }
</script>
<style scoped>
  .el-table .success-row {
    background: #f0f9eb;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .success {
    text-color: #67C23A
  }

  .danger {
    text-color: #F56C6C
  }
  .mgbottom {
    margin-bottom: 5px;
  }

  .imgMiddle {
    height: 37px;
    vertical-align: middle
  }
</style>
